<template>
  <div class="loginPart">
    <!-- 第一种登录方式 (手机号 + 密码 + 用户) -->
  <van-form v-if="!loginway" >
    <div class="title">
      <span>手机号登录/注册</span>
      <span>一站式记录你的运动</span>
      <span @click="toggle('message')">短信登录</span>
    </div>
    <van-field
    v-model.trim="phone"
    name="手机号"
    label="手机号："
    placeholder="手机号"
    :rules="[{ required: true, message: '请填写手机号' }]"
    @blur="submitPhoneCheck"
  />
<!--   <van-field
    v-model="username"
    name="用户名"
    label="用户名："
    placeholder="用户名"
    :rules="[{ required: true, message: '请填写用户名' }]"
  /> -->
  <van-field
    v-model="password"
    type="password"
    name="密码"
    label="密码："
    placeholder="密码"
    :rules="[{ required: true, message: '请填写密码' }]"
  />
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit" @click="loginByPd">提交</van-button>
  </div>
  <span id="freeMark" @click="comeIn">随便逛逛</span>
</van-form>
<!-- 第二种登录方式 (手机号 + 发送 + 短信验证码) -->
  <van-form v-else>
    <div class="title">
      <span>密码登录</span>
      <span>快速匹配</span>
      <span @click="toggle('password')">免密登录</span>
    </div>
    <van-field
    v-model="phone"
    name="手机号"
    label="手机号："
    placeholder="手机号"
    :rules="[{ required: true, message: '请填写手机号' }]"
  />
  <van-field
    v-model="message"
    name="短信验证码"
    label="短信验证码："
    placeholder="短信验证码"
    :rules="[{ required: true, message: '请填写短信验证码' }]"
  />
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit" @click="loginByInfo">提交</van-button>
  </div>
      <div class="toggleBtn">
      <span @click="toggle('message')">短信登录</span>
      <span>|</span>
      <span @click="toggle('password')">密码登录</span>
    </div>
</van-form>
    <div class="footer">
      <ul>
        <li><img src="../assets/svg/微信.svg" alt=""></li>
        <li><img src="../assets/svg/QQ.svg" alt=""></li>
        <li><img src="../assets/svg/新浪微博1.svg" alt=""></li>
      </ul>
      <span id="check"><input type="checkbox" name="" id=""></span>
      <span id="policy">我已经阅读并同意Keep用户协议和隐私协议政策</span>
    </div>
  </div>
</template>
<script>
import { toLoginByPd, toLoginByInfo, PhoneNumbCheck } from '../request/API.js'
import { Toast } from 'vant'
// import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'LoginToast',
  data () {
    return {
      username: '',
      password: '',
      phone: '',
      message: '',
      isCheck: false,
      // 登录方式
      loginway: false,
      //
      value1: '',
      value2: '',
      value3: '',
      pattern: /\d{6}/
    }
  },
  /* watch: {
    phone (newVal, oldVal) {
      if(newVal.trim().length === 11) {
      }
    }
  }, */
  components: {
  },
  methods: {
    // 清空信息并跳转路由
    clear () {
      this.phone = ''
      this.message = ''
      this.$router.push('/home')
    },
    // 验证手机号请求
    async submitPhoneCheck () {
      console.log(this.phone)
      if (this.phone === '') return
      const { data: res } = await PhoneNumbCheck({
        phone: this.phone
      })
      console.log(res)
      if (res.code) {
        this.isCheck = true
      } else {
        this.isCheck = false
      }
      console.log('1')
    },
    // 通过短信登录
    async loginByInfo () {
      if (this.isCheck) {
        const { data: res } = await toLoginByInfo({
          phone: this.phone,
          message: this.message
        })
        console.log(res)
        if (!res.code) return Toast.fail('登录失败') // 判断是否登陆成功
        Toast.success('登陆成功') // 提示登录成功 Toast.success('登陆成功')
        localStorage.setItem('token', 'login') // 登录成功后存token权限 到localStrage
        this.clear()
      } else {
        // 弹框提示手机验证不通过
        Toast.fail('该手机号不存在')
      }
    },
    // 通过密码登录
    async loginByPd () {
      if (this.isCheck) {
        const { data: res } = await toLoginByPd({
          phone: this.phone,
          password: this.password
        })
        console.log(res)
        if (!res.code) return Toast.fail('登录失败') // 判断是否登陆成功
        Toast.success('登陆成功') // 提示登录成功 Toast.success('登陆成功')
        localStorage.setItem('token', 'login') // 登录成功后存token权限 到localStrage
        this.clear()// 清空输入框内的信息
      } else {
        // 弹框提示手机验证不通过
        Toast.fail('该手机号不存在')
      }
    },
    // 切换登陆方式
    toggle (str) {
      if (str === 'message') {
        this.loginway = true
      } else if (str === 'password') {
        this.loginway = false
      } else {
        return console.log('登录方式切换报错！')
      }
    },
    // 离开login页面后调用
    comeIn () {
      // 修改tabbar控件
      this.$store.dispatch('Tabbar/asyncSetLogin', true)
      /*  console.log(this.$store.state.isLogin) */ // undedfind ??
      this.$router.push('/home')
    },
    // 校验函数返回 true 表示校验通过，false 表示不通过
    validator (val) {
      return /1\d{10}/.test(val)
    },
    // 异步校验函数返回 Promise
    asyncValidator (val) {
      return new Promise((resolve) => {
        Toast.loading('验证中...')

        setTimeout(() => {
          Toast.clear()
          resolve(/\d{6}/.test(val))
        }, 1000)
      })
    },
    onFailed (errorInfo) {
      console.log('failed', errorInfo)
    }
  }
}
</script>
<style lang="less" scoped>
.footer {
  position: relative;
  width: 100%;
  height: 3.5rem;
  overflow: hidden;
  #policy {
    display: inline-block;
    position: absolute;
    width: 16rem;
    height: 1rem;
    font-size: 0.7rem;
    margin-left: -13.8rem;
    margin-top: 2.5rem;
  }
  #check {
    display: inline-block;
    position: absolute;
    width: 1rem;
    height: 1rem;
    font-size: 0.7rem;
    margin-left: -15rem;
    margin-top: 2.25rem;
  }
  li {
    float: left;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 50%;
    text-align: center;
    line-height: 3rem;
    margin: 0 1rem;
    img {
      width: 60%;
      height: 60%;
    }
  }
  li:nth-child(1) {
    margin-left: 6rem;
  }
}
.title {
  position: relative;
  width: 100%;
  height: 6rem;
  span {
    display: inline-block;
    position: absolute;
    width: 8rem;
    height: 1rem;
    font-size: 0.7rem;
  }
  span:nth-child(3) {
    width: 3rem;
    right: 1rem;
    top: -2rem;
  }
  span:nth-child(1) {
    left: 2rem;
    top: 0.5rem;
    font-size: 1rem;
  }
  span:nth-child(2) {
    left: 2rem;;
    top: 2.5rem;
  }
}
#freeMark {
  display: inline-block;
  width: 4rem;
  height: 1rem;
  margin-left: 10rem;
  font-size: 0.8rem;
}
.van-form {
  position: relative;
  width: 100%;
  height: 35rem;
  margin-top: 3rem;
}
.toggleBtn {
  position: relative;
  top: 0;
  left: 6.5rem;
  width: 11rem;
  height: 1rem;
  color: #949393;
  font-size: 0.8rem;
  span:nth-child(1), span:nth-child(3) {
    display: inline-block;
    margin-left: 0.3rem;
    width: 4rem;
    height: 100%;
    margin: 0 0.5rem;
  }
  span:nth-child(2){
    width: 0.1rem;
    height: 100%;
    margin-right: 0.3rem;
  }
}
</style>
